<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次作业</title>
</head>
<body>
    <h1>第一行</h1>
    <h1>第二行</h1>
    <h1>第三行</h1>
    <span>文字1</span>
    <span>文字2</span>
    <span>文字3</span>
<div style="display:flex;border:2px solid red;height:500px;width:500px;">
    <div style="width:100px;background-color: blue;color: white;text-align: center;">第一列</div>
    <div style="flex: 1;background-color: purple;color: white;text-align: center;">第二列</div>
    <div style="flex: 1;background-color: black;color: white;text-align: center;">第三列</div>
</div>
<div style="position:relative;border:2px solid red;height:500px;width:500px;">
    <div style="z-index: 100;position:absolute;right: 0;top: 0;border: 2px solid black;height: 100px;width: 100px;">
    </div>
    <div style="z-index: 99;position:absolute;right:0;top:0;border: 2px solid blue;height:100px;width: 100px;">
    </div>
    <div style="position:absolute;right:0;bottom:0;border: 2px solid yellow;height:100px;width: 100px;">
    </div>
    <div style="position:fixed;right: 0;bottom: 0px;border: 1px solid red;width: 100px;height: 100px;">
    </div>
</div>
</body>
<html>